<template>
    <div class="store">
        <el-container>
            <el-header>
                <el-menu :default-active="activeIndex" class="el-menu-demo" background-color="#fff" text-color="black" mode="horizontal" @select="handleSelect">
                    <el-col :span="5">
                        <el-submenu index="1">
                            <template slot="title">草帽炸鸡</template>
                                <div class="title-item">
                                    <div class="title-nav">
                                        <ul>
                                            <div class="biaoti">关于我们</div>
                                            <li><a href="">草帽炸鸡中国</a></li>
                                            <li><a href="">品牌介绍</a></li>
                                            <li><a href="">经营理念</a></li>
                                            <li><a href="">商业道德与合规</a>  </li>
                                        </ul>
                                        <ul>
                                            <div class="biaoti">公司发展</div>
                                            <li><a href="">品牌理念</a></li>
                                            <li><a href="">10年历程</a></li>
                                            <li><a href="">业务平台</a></li>
                                            <li><a href="">管理层介绍</a></li>
                                        </ul>
                                        <ul>
                                            <div class="biaoti">加入草帽炸鸡</div>
                                            <li><a href="">人员品牌主张</a></li>
                                            <li><a href="">汉堡大学</a></li>
                                            <li><a href="">校园招聘</a></li>
                                            <li><a href="">工作机会</a></li>
                                        </ul>
                                        <ul>
                                            <div class="biaoti">品牌活动</div>
                                            <li><a href="">派DAY</a></li>
                                            <li><a href="">大薯日</a></li>
                                            <li><a href="">夏日追光计划</a></li>
                                            <li><a href="">8.8会员节</a></li>
                                        </ul>
                                        <ul>
                                            <div class="biaoti">信息公示</div>
                                            <li><a href="">供应商信息</a></li>
                                            <li><a href="">证照公示</a></li>
                                            <li><a href="">网络餐饮管理方法</a></li>
                                        </ul>
                                    </div>
                                </div>
                        </el-submenu>
                    </el-col>
                    <el-col :span="5">
                        <el-submenu index="2">
                            <template slot="title">热爱美食</template>
                            <div class="title-item">
                                <div class="title-nav">
                                    <ul>
                                        <div class="biaoti">关于我们</div>
                                        <li><a href="">草帽炸鸡中国</a></li>
                                        <li><a href="">品牌介绍</a></li>
                                        <li><a href="">经营理念</a></li>
                                        <li><a href="">商业道德与合规</a>  </li>
                                    </ul>
                                    <ul>
                                        <div class="biaoti">公司发展</div>
                                        <li><a href="">品牌理念</a></li>
                                        <li><a href="">10年历程</a></li>
                                        <li><a href="">业务平台</a></li>
                                        <li><a href="">管理层介绍</a></li>
                                    </ul>
                                    <ul>
                                        <div class="biaoti">加入草帽炸鸡</div>
                                        <li><a href="">人员品牌主张</a></li>
                                        <li><a href="">汉堡大学</a></li>
                                        <li><a href="">校园招聘</a></li>
                                        <li><a href="">工作机会</a></li>
                                    </ul>
                                    <ul>
                                        <div class="biaoti">品牌活动</div>
                                        <li><a href="">派DAY</a></li>
                                        <li><a href="">大薯日</a></li>
                                        <li><a href="">夏日追光计划</a></li>
                                        <li><a href="">8.8会员节</a></li>
                                    </ul>
                                    <ul>
                                        <div class="biaoti">信息公示</div>
                                        <li><a href="">供应商信息</a></li>
                                        <li><a href="">证照公示</a></li>
                                        <li><a href="">网络餐饮管理方法</a></li>
                                    </ul>
                                </div>
                            </div>
                        </el-submenu>
                    </el-col>
                    <el-col :span="5">
                        <el-submenu index="3">
                            <template slot="title">热爱服务</template>
                            <div class="title-item">
                                <div class="title-nav">
                                    <ul>
                                        <div class="biaoti">关于我们</div>
                                        <li><a href="">草帽炸鸡中国</a></li>
                                        <li><a href="">品牌介绍</a></li>
                                        <li><a href="">经营理念</a></li>
                                        <li><a href="">商业道德与合规</a>  </li>
                                    </ul>
                                    <ul>
                                        <div class="biaoti">公司发展</div>
                                        <li><a href="">品牌理念</a></li>
                                        <li><a href="">10年历程</a></li>
                                        <li><a href="">业务平台</a></li>
                                        <li><a href="">管理层介绍</a></li>
                                    </ul>
                                    <ul>
                                        <div class="biaoti">加入草帽炸鸡</div>
                                        <li><a href="">人员品牌主张</a></li>
                                        <li><a href="">汉堡大学</a></li>
                                        <li><a href="">校园招聘</a></li>
                                        <li><a href="">工作机会</a></li>
                                    </ul>
                                    <ul>
                                        <div class="biaoti">品牌活动</div>
                                        <li><a href="">派DAY</a></li>
                                        <li><a href="">大薯日</a></li>
                                        <li><a href="">夏日追光计划</a></li>
                                        <li><a href="">8.8会员节</a></li>
                                    </ul>
                                    <ul>
                                        <div class="biaoti">信息公示</div>
                                        <li><a href="">供应商信息</a></li>
                                        <li><a href="">证照公示</a></li>
                                        <li><a href="">网络餐饮管理方法</a></li>
                                    </ul>
                                </div>
                            </div>
                        </el-submenu>
                    </el-col>
                    <el-col :span="5">
                        <el-submenu index="4">
                            <template slot="title">店铺中心</template>
                            <div class="title-item">
                                <div class="title-nav">
                                    <ul>
                                        <div class="biaoti">关于我们</div>
                                        <li><a href="">草帽炸鸡中国</a></li>
                                        <li><a href="">品牌介绍</a></li>
                                        <li><a href="">经营理念</a></li>
                                        <li><a href="">商业道德与合规</a>  </li>
                                    </ul>
                                    <ul>
                                        <div class="biaoti">公司发展</div>
                                        <li><a href="">品牌理念</a></li>
                                        <li><a href="">10年历程</a></li>
                                        <li><a href="">业务平台</a></li>
                                        <li><a href="">管理层介绍</a></li>
                                    </ul>
                                    <ul>
                                        <div class="biaoti">加入草帽炸鸡</div>
                                        <li><a href="">人员品牌主张</a></li>
                                        <li><a href="">汉堡大学</a></li>
                                        <li><a href="">校园招聘</a></li>
                                        <li><a href="">工作机会</a></li>
                                    </ul>
                                    <ul>
                                        <div class="biaoti">品牌活动</div>
                                        <li><a href="">派DAY</a></li>
                                        <li><a href="">大薯日</a></li>
                                        <li><a href="">夏日追光计划</a></li>
                                        <li><a href="">8.8会员节</a></li>
                                    </ul>
                                    <ul>
                                        <div class="biaoti">信息公示</div>
                                        <li><a href="">供应商信息</a></li>
                                        <li><a href="">证照公示</a></li>
                                        <li><a href="">网络餐饮管理方法</a></li>
                                    </ul>
                                </div>
                            </div>
                        </el-submenu>
                    </el-col>
                </el-menu>
            </el-header>
            <el-main style="height:auto">
                <el-row :gutter="20">
                    <el-col :span="20" :offset="2">
                        <div class="grid-content bg-purple">
                            <el-col :span="12" class="bloack-wall">
                                <div class="inner">
                                    <a href="#">
                                        <img src="../../assets/炸鸡桶.jpg" alt="" width="100%">
                                        <div class="info">
                                            <h4>39吃爽！炸鸡天团桶出道！</h4>
                                            <time>2021.04.22</time>
                                        </div>
                                    </a>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <el-col :span="12" class="bloack-wall">
                                    <div class="inner">
                                        <a href="#">
                                            <img src="../../assets/store1.jpg" alt="" width="100%">
                                            <div class="info fo1">
                                                <h4>草帽炸鸡门店落户广州</h4>
                                                <time>2021.04.24</time>
                                            </div>
                                        </a>
                                    </div>
                                </el-col>
                                <el-col :span="12" class="bloack-wall">
                                    <div class="inner">
                                        <a href="#">
                                            <img src="../../assets/store2.jpg" alt="" width="100%">
                                            <div class="info">
                                                <h4>【0元】辣翅，还有辣堡买1送1！</h4>
                                                <time>2021.04.24</time>
                                            </div>
                                        </a>
                                    </div>
                                </el-col>
                            </el-col>
                        </div>
                    </el-col>
                    <el-col :span="20" :offset="2">
                        <div class="grid-content bg-purple">
                            <el-col :span="12" class="bloack-wall">
                                <div class="inner">
                                    <a href="#">
                                        <img src="../../assets/store4.jpg" alt="" width="100%">
                                        <div class="info">
                                            <h4>醒醒醒醒醒醒醒醒醒醒醒醒了吗！</h4>
                                            <time>2021.04.22</time>
                                        </div>
                                    </a>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <el-col :span="12" class="bloack-wall">
                                    <div class="inner">
                                        <a href="#">
                                            <img src="../../assets/store3.jpg" alt="" width="100%">
                                            <div class="info fo1">
                                                <h4>你能坚持到第几辣？</h4>
                                                <time>2021.04.24</time>
                                            </div>
                                        </a>
                                    </div>
                                </el-col>
                                <el-col :span="12" class="bloack-wall">
                                    <div class="inner">
                                        <a href="#">
                                            <img src="../../assets/store5.jpg" alt="" width="100%">
                                            <div class="info">
                                                <h4>领票减5元 → 早晨肉，植造的！</h4>
                                                <time>2021.04.24</time>
                                            </div>
                                        </a>
                                    </div>
                                </el-col>
                            </el-col>
                        </div>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>
<script>
export default {
    name:'store',
    data() {
        return {
            activeIndex: '1'
        }
    },
    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        }
    },
}
</script>
<style>
    .el-header {
        margin: 0;
        padding: 0;
        background-color: aqua;
        color: black;
        text-align: center;
        line-height: 100px;
    }
    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        height:auto;
    }
    .el-row {
        margin-bottom: 20px;
    }
    .el-col {
        border-radius: 4px;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .bg-purple {
        /* background: #d3dce6; */
    }
    .bloack-wall {
        position: relative;
        margin: 0 0 20px 0;
        padding: 0 10px 0 10px;
        overflow: hidden;
        /* background-color: red; */
    }
    .inner {
        display: block;
        position: relative;
        height: 343px;
        background:#ffbc0d;
    }
    .bloack-wall a > img {
        display: block;
        width: 100%;
        height: auto;
    }
    .bloack-wall .inner > a {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        overflow: hidden;
        cursor: pointer;
    }
    .info {
        display: block;
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
        height: 43%;
        /* padding: 17px; */
        background: rgba(0, 0, 0, 0.3);
        box-sizing: border-box;
    }
    .info h4 {
        overflow-wrap: break-word;
        max-height: 60px;
        margin-bottom: 20px; 
        font-size: 22px;
        line-height: 1.5;
        color: #fff;
        font-weight: 800;
    }
    .bloack-wall time {
        display: block;
        font-size: 12px;
        line-height: 12px;
        color: #fff;
    }
    .fo1 {
        display: block;
        /* padding-bottom: 37px; */
    }
    .title-item {
        max-width: 100%;
        margin-top: 30px;
        height: 100%;
    }
    .title-nav {
        width: 100%;
        float: left;
    }
    .title-nav ul {
        float: left;
    }
    .title-nav li {
        text-align: center;
        list-style: none;
        width: 150px;
        line-height: 30px;
        font-size: 16px;
    }
    .title-nav li a {
        color: black;
        text-decoration: none;
    }
    .title-nav li a:hover {
        color: red;
    }
    .biaoti {
        text-align: center;
        margin-bottom: 10px;
        font-size: 18px;
        font-weight: 800;
    }
</style>
